<template>
  <div>
    <div ref="myChart" id="my-chart"></div>
  </div>
</template>

<script setup name="TwoBar">
import * as echarts from 'echarts';
import { onMounted, ref, reactive, toRefs } from 'vue';

const Props = defineProps({
  barWidth: {
    type: Number,
    default: 30,
  },
  totalData: {
    type: Array,
    default: () => [220, 182, 191, 234, 290],
  },
  overData: {
    type: Array,
    default: () => [120, 132, 101, 134, 90],
  },
  barData: {
    type: Array,
    default: () => [
      "'红石榴'\n家园",
      "'红石榴'\n驿站",
      "'红石榴'\n工作室",
      "'红石榴'\n志愿队伍",
      "'红石榴'\n宣讲团",
    ],
  },
  xAxisData: {
    type: Array,
    default: () => ['数据A', '数据B'],
  },
});
const { barWidth, totalData, overData, barData, xAxisData } = toRefs(Props);

const myChart = ref('');
let charts = null;
const isA = ref(true);
const isB = ref(true);

onMounted(() => {
  init();
  myChart.value.children[0].style.width = '100%';
  myChart.value.children[0].children[0].style.width = '100%';
  setTimeout(() => {
    charts.resize();
  }, 100);
});

const init = () => {
  charts = echarts.init(myChart.value);
  let dataA = totalData.value;
  let dataB = overData.value;
  charts.on('legendselectchanged', (obj) => {
    if (!obj) {
      isA.value = true;
      isB.value = true; 
    } else {
      isA.value = obj.selected[xAxisData.value[0]];
      isB.value = obj.selected[xAxisData.value[1]];
    }
    charts.setOption(getEcharts3DBar(barData.value, dataA, dataB), true);
  });
  charts.setOption(getEcharts3DBar(barData.value, dataA, dataB));
}
const getEcharts3DBar = (barData, dataA, dataB) => {
  var colorArr = [
    ['#1070C9', '#1890FF', '#1890FF'],
    ['#13ADAD', '#1EE7E7', '#1EE7E7'],
  ];
  var colorA = {
    type: 'linear',
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: colorArr[0][0],
      },
      {
        offset: 0.5,
        color: colorArr[0][0],
      },
      {
        offset: 0.5,
        color: colorArr[0][1],
      },
      {
        offset: 1,
        color: colorArr[0][1],
      },
    ],
  };
  var colorB = {
    type: 'linear',
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: colorArr[1][0],
      },
      {
        offset: 0.5,
        color: colorArr[1][0],
      },
      {
        offset: 0.5,
        color: colorArr[1][1],
      },
      {
        offset: 1,
        color: colorArr[1][1],
      },
    ],
  };
  
  var barWidth = Props.barWidth;
  var constDataA = [];
  var showDataA = [];
  var constDataB = [];
  var showDataB = [];
  var legendSelected = {};
  legendSelected[`${xAxisData.value[0]}`] = isA.value;
  legendSelected[`${xAxisData.value[1]}`] = isB.value;
  dataA.filter(function (item) {
    if (item) {
      constDataA.push(1);
      showDataA.push(item);
    } else {
      constDataA.push(0);
      showDataA.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: 'rgba(0,0,0,0)',
            borderWidth: 2,
            color: 'rgba(0,0,0,0)',
          },
        },
      });
    }
  });
  dataB.filter(function (item) {
    if (item) {
      constDataB.push(1);
      showDataB.push(item);
    } else {
      constDataB.push(0);
      showDataB.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: 'rgba(0,0,0,0)',
            borderWidth: 2,
            color: 'rgba(0,0,0,0)',
          },
        },
      });
    }
  });
  return {
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var str = params[0].axisValue + '：';
        params.filter(function (item) {
          if (item.componentSubType == 'bar') {
            str += '<br/>' + item.marker + item.seriesName + '：' + item.value;
          }
        });
        return str;
      },
    },
    legend: {
      top: 10,
      textStyle: {
        color: '#FFF',
      },
      selected: legendSelected,
    },
    grid: {
      bottom: '20px',
      top: '60px',
      right: '20px',
      left: '40px',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: barData, // x轴所要展示的数据
        axisLine: {
          // 坐标轴轴线的相关设置
          lineStyle: {
            // 线的样式
            color: 'rgba(255,255,255,0.70)', // 坐标轴线线的颜色
          },
          show: true, // 是否显示坐标轴轴线
        },
        axisTick: {
          // 坐标轴刻度的相关设置
          alignWithLabel: true, // 刻度线和标签对齐
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        show: true, // 是否显示y轴
        splitLine: {
          lineStyle: {
            show: true,
            color: 'rgba(255,255,255,0.5)',
            type: 'dashed',
            width: 0.8,
          },
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: 'rgba(255,255,255,0.70)',
            margin: 15,
          },
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        // A 柱
        z: 1,
        name: xAxisData.value[0],
        type: 'bar',
        barWidth: barWidth,
        barGap: '10%',
        data: isA.value ? dataA : [],
        itemStyle: {
          normal: {
            color: colorA,
          },
        },
        // itemStyle: {
        //   decal: {
        //     symbol: "circle"
        //   }
        // }
      },
      {
        // A 底
        z: 2,
        name: xAxisData.value[0],
        type: 'pictorialBar',
        data: isA.value ? constDataA : [],
        symbol: 'diamond',
        symbolOffset: isB.value && isA.value ? ['-55%', '50%'] : ['0%', '50%'],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: colorA,
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        // A 顶
        z: 3,
        name: xAxisData.value[0],
        type: 'pictorialBar',
        symbolPosition: 'end',
        data: isA.value ? showDataA : [],
        symbol: 'diamond',
        symbolOffset:
          isB.value && isA.value ? ['-65%', '-65%'] : ['0%', '-65%'],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderColor: colorArr[0][2],
            borderWidth: 2,
            color: colorArr[0][2],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        // B 柱
        z: 4,
        name: xAxisData.value[1],
        barGap: '10%',
        type: 'bar',
        barWidth: barWidth,
        data: isB.value ? dataB : [],
        itemStyle: {
          normal: {
            color: colorB,
          },
        },
      },
      {
        // B 底
        z: 5,
        name: xAxisData.value[1],
        type: 'pictorialBar',
        data: isB.value ? constDataB : [],
        symbol: 'diamond',
        symbolOffset: isB.value && isA.value ? ['55%', '50%'] : ['0%', '50%'],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: colorB,
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        // B 顶
        z: 6,
        name: xAxisData.value[1],
        type: 'pictorialBar',
        symbolPosition: 'end',
        data: isB.value ? showDataB : [],
        symbol: 'diamond',
        symbolOffset: isB.value && isA.value ? ['65%', '-65%'] : ['0%', '-65%'],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        itemStyle: {
          normal: {
            borderColor: colorArr[1][2],
            borderWidth: 2,
            color: colorArr[1][2],
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
  };
};
</script>

<style lang="scss" scoped>
#my-chart {
  width: 100%;
  height: 280px;
  background: #182d6cc9;
}

</style>
